<template>
    <n-scrollbar x-scrollable style="max-height: 100vh">
        <CommonPage show-footer>
          <div>
            <n-form ref="form"
                    :model="searchCondition"
                    :show-require-mark="false"
                    label-align="right"
                    label-placement="left"
                    label-width="80px">
              <div>
              <div class="grid md:flex md:flex-wrap md:gap-x-1">
                  <n-form-item>
                      <label style="width: 90px">供应商名称：</label>
                      <n-input v-model:value="searchCondition.name" placeholder="" style="width: 120px;" clearable/>
                  </n-form-item>
                  <n-form-item>
                      <label style="width: 90px">联系人姓名：</label>
                      <n-input v-model:value="searchCondition.contactName" placeholder=""
                               style="width: 120px;" clearable/>
                  </n-form-item>
                  <n-form-item style="margin-left: 10px">
                      <n-button type="primary" @click="searchByCondition">筛选</n-button>
                  </n-form-item>
                  <n-form-item style="margin-left: 10px">
                      <n-button type="primary" @click="showForm=true">添加供应商</n-button>
                  </n-form-item>
                  <n-form-item>
                      <n-button style="margin-left: 10px" type="error"
                                @click="deleteSelectSuppliers">批量删除
                      </n-button>
                  </n-form-item>
                <n-form-item style="margin-left: 10px">
                  <n-button @click="exportListInfo"
                            type="primary">
                    导出
                  </n-button>
                </n-form-item>
              </div>
              <AddSupplierForm
                  :show="showForm"
                  @update-page="searchByCondition"
                  :onClose="handleClose"/>
                <UpdateSupplierForm
                    @update-page="searchByCondition"
                    :show1="showForm1"
                    :onClose="handleClose"
                    :attribute="currentAttribute"
                />
              <n-data-table
                  remote
                  :single-line="false"
                  ref="table"
                  :columns="columns"
                  :data="supplierList"
                  :loading="loading"
                  :pagination="paginationReactive"
                  :row-key="rowKey"
                  :scroll-x="900"
                  @update:checked-row-keys="handleCheck"
              />
              </div>
            </n-form>
          </div>

        </CommonPage>
    </n-scrollbar>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import api from '@/api/admin';
import SupplierActions from "@/views/admin/category/components/category-actions.vue"
import {useUserStore} from '@/store';
import {useRouter} from 'vue-router';
import AddSupplierForm from './components/supplier-add.vue'
import UpdateSupplierForm from './components/supplier-edit.vue'

const showForm = ref(false);
const showForm1 = ref(false);
const currentAttribute = ref(null); // 当前编辑的属性
const handleClose = () => {
  showForm.value = false;
  showForm1.value = false;
};
const searchCondition = ref({
	name: '',
	contactName: '',
})
const userStore = useUserStore()
const router = useRouter()
const loading = ref(true)
const supplierList = ref([])
const range = ref(null)
const admins = ref([])
admins.value.push({
	label: '全部',
	value: -1,
})
const checkedRowKeysRef = ref([]);
const handleCheck = (rowKeys) => {
	checkedRowKeysRef.value = rowKeys;
}
const columns = [
	{
		type: 'selection',
		fixed: 'left',
	},
	{
        key: 'colId',
        title: '序号',
        width: 60,
    },
    {
        key: 'name',
        title: '供货商名称',
        width: 100,
    },
    {
        key: 'contactName',
        title: '联系人姓名',
        width: 100,
    },
    {
        key: 'phone',
        title: '联系电话',
        width: 100,
    },
    {
        key: 'address',
        title: '地址',
        width: 100,
    },

    {
        key: 'operation',
        title: '操作',
        width: 100,
        render(row) {
            return h(
               SupplierActions,
                {
                    onClickEdit: () => onEditSupplier(row),
                    onClickDelete: () => onDeleteSupplier(row),
                }
            );
        }
    },


]
let total = 0
const paginationReactive = reactive({
    page: 1,
    pageSize: 50,
    showSizePicker: true,
    pageSizes: [50, 100, 150],
    itemCount:0,
    prefix: () => {
        return '查询出 ' + total + '条记录';
    },
    onChange: (page) => {
        paginationReactive.page = page;
        queryByPage()
    },
    onUpdatePageSize: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
        queryByPage()
    }
});

const onEditSupplier = async (supplier) => {
  currentAttribute.value = supplier; // 设置当前编辑的属性
  showForm1.value = true; // 显示编辑窗口
}

const deleteSelectSuppliers= ()=>{
    if(checkedRowKeysRef.value.length <= 0) {
        $message.error("当前并未选择供应商！")
        return
    }
    $dialog.confirm({
        title: '警告',
        content: '您确定删除当前所选供应商？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
            const ids = checkedRowKeysRef.value.join(",")
            console.log(ids)
            loading.value = true
            try {
                const res = await api.deleteSuppliers({params:{ids}})
                if(res.code === 200) {
                    $message.success("删除所选供应商成功！")
                    // await queryByPage()
                    await searchByCondition()
                }
                else {
                    $message.error(res.message)
                }
            } catch (err) {
                $message.error("删除所选供应商失败！")
            }finally{
                loading.value = false
            }
        },
    })
}
const searchByCondition = async ()=>{
    loading.value = true
    try {
	    paginationReactive.page = 1;
	    const res = await api.findPageSupplier({
		    params: {
			    ...searchCondition.value,
			    pageNum: paginationReactive.page,
			    pageSize: paginationReactive.pageSize,
		    }
	    })
	    if (res.code === 200) {
		    total = res.data.total
		    paginationReactive.itemCount = total
		    const baseCount = (paginationReactive.page - 1) * paginationReactive.pageSize
		    supplierList.value = res.data.records.map((item, i) => {
			    return {
				    ...item,
				    colId: baseCount + i + 1,
			    }
		    })
	    } else {
		    $message.error(res.message)
	    }
    } catch (err) {
        $message.error("查询供应商失败！")
    }finally{
        loading.value = false
    }
}
const onDeleteSupplier = async (log)=>{
    $dialog.confirm({
        title: '警告',
        content: '您确定删除当前供应商？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
            const {id} = log
            loading.value = true
            try {
                const res = await api.deleteSupplier({id})
                if(res.code === 200) {
                    $message.success("删除供应商成功！")
                    // await queryByPage()
                    await searchByCondition()
                }
                else {
                    $message.error(res.message)
                }
            } catch (err) {
                $message.error("删除供应商失败！")
            }finally{
                loading.value = false
            }
        }
    })
}
const exportListInfo = async () => {
  const res = await api.exportSupplierList({
    name: searchCondition.value.name,
    contactName: searchCondition.value.contactName,
  });
  const contentDisposition = res.headers["content-disposition"]
  let original_fileName = ""
  if(contentDisposition) {
    const uri = res.headers["content-disposition"].split("=")[1]
    original_fileName = window.decodeURI(uri)
  }
  const blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
  if(window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob, original_fileName);
  } else{
    const fileName = original_fileName;
    const elink = document.createElement('a')
    document.body.appendChild(elink)
    elink.download= fileName;
    elink.style.display ="none"
    elink.href  = window.URL.createObjectURL(blob)
    elink.click()
    window.URL.revokeObjectURL(elink.href)
    document.body.removeChild(elink)
  }
}
const onDetailSupplier = async (log) => {
	const {id} = log
	await router.push({name: 'AdminLogDetail', params: {logId: id}});
}
const queryAdminList = async () => {
	loading.value = true
	try {
		const res = await api.findAllAdmin()
		if (res.code === 200) {
			res.data.map((item) => {
				admins.value.push({
					label: item.name,
					value: item.id
				})
			})
		} else {
			$message.error(res.message)
		}
	} catch (err) {
		$message.error("获取管理员信息失败！")
	} finally {
		loading.value = false
	}
}
const queryByPage = async () => {
	loading.value = true
	try {
		const res = await api.findPageSupplier(
			{
				params: {
					pageNum: paginationReactive.page,
					pageSize: paginationReactive.pageSize,
				}
			})
		if (res.code === 200) {
			total = res.data.total
			paginationReactive.itemCount = total
			const baseCount = (paginationReactive.page - 1) * paginationReactive.pageSize
			supplierList.value = res.data.records.map((item, i) => {
				return {
					...item,
					colId: baseCount + i + 1,
				}
			})
			$message.success("获取供应商成功！")
		} else {
			$message.error(res.message)
		}
	} catch (err) {
        $message.error("获取供应商失败！")
    }finally{
        loading.value = false
    }
}
const rowKey = (rowData) => {
    return rowData.id
}
onMounted(()=>{
	queryAdminList()
	queryByPage()
})
</script>
<style scoped>
:deep(.n-data-table-th__title),
:deep(.n-data-table-td) {
    text-align: center;

}

:deep(.n-select) {
    width: 140px !important;
}

:deep(.two-line-description) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 控制显示的行数 */
    overflow: hidden;
}
</style>
